<cds-modal size="md"
           [open]="open"
           (overlaySelected)="closeModal()"
           [hasScrollingContent]="true">
  <cds-modal-header (closeSelect)="closeModal()">
    <h3 cdsModalHeaderHeading
        *ngIf="titleText">
      {{ titleText }}
    </h3>
  </cds-modal-header>
    <div cdsModalContent
         data-testid="modal-content">
      <form [formGroup]="formGroup"
            #formDir="ngForm"
            novalidate>
      <p *ngIf="message"
         id="description">{{ message }}</p>
      <ng-container *ngFor="let field of fields">
        <div class="form-item">
          <cds-text-label *ngIf="field.type === 'text'"
                          [for]="field.name"
                          [invalid]="getError(field)"
                          [invalidText]="getError(field)"
                          [label]="field.label"
                          [cdRequiredField]="field?.required === true ? field.label : ''"
                          i18n>
            {{ field.label }}
            <input cdsText
                   type="text"
                   [id]="field.name"
                   [name]="field.name"
                   [formControlName]="field.name"
                   [invalid]="getError(field)"
                   autofocus>
          </cds-text-label>
          <cds-number *ngIf="field.type === 'number'"
                      [for]="field.name"
                      [invalid]="getError(field)"
                      [invalidText]="getError(field)"
                      [label]="field.label"
                      [cdRequiredField]="field?.required === true ? field.label : ''"
                      [formControlName]="field.name"
                      [id]="field.name"
                      [name]="field.name"
                      i18n></cds-number>
          <cds-text-label *ngIf="field.type === 'binary'"
                          [for]="field.name"
                          [label]="field.label"
                          [invalid]="getError(field)"
                          [invalidText]="getError(field)"
                          [cdRequiredField]="field?.required === true ? field.label : ''"
                          i18n>
            {{ field.label }}
            <input type="text"
                   [id]="field.name"
                   [name]="field.name"
                   [formControlName]="field.name"
                   cdsText
                   cdDimlessBinary>
          </cds-text-label>
          <cds-select *ngIf="field.type === 'select'"
                      [label]="field.label"
                      [for]="field.name"
                      [id]="field.name"
                      [formControlName]="field.name"
                      [options]="field?.typeConfig?.options"
                      [placeholder]="field?.typeConfig?.placeholder"
                      [invalid]="getError(field)"
                      [invalidText]="getError(field)"
                      [cdRequiredField]="field?.required === true ? field.label : ''"
                      i18n>
            <option *ngIf="field?.typeConfig?.placeholder"
                    [ngValue]="null">
              {{ field?.typeConfig?.placeholder }}
            </option>
            <option *ngFor="let option of field?.typeConfig?.options"
                    [value]="option.value">
              {{ option.text }}
            </option>
          </cds-select>

          <cds-combo-box *ngIf="field.type === 'select-badges'"
                         type="multi"
                         selectionFeedback="top-after-reopen"
                         [label]="field.label"
                         [for]="field.name"
                         [formControlName]="field.name"
                         itemValueKey="content"
                         [id]="field.name"
                         [items]="field?.typeConfig?.options"
                         [invalid]="getError(field)"
                         [invalidText]="getError(field)"
                         [appendInline]="false"
                         [cdRequiredField]="field?.required === true ? field.label : ''"
                         i18n>
            <cds-dropdown-list></cds-dropdown-list>
          </cds-combo-box>
        </div>
      </ng-container>
    </form>
  </div>
  <cd-form-button-panel (submitActionEvent)="onSubmitForm(formGroup.value)"
                        [form]="formGroup"
                        [submitText]="submitButtonText"
                        [modalForm]="true"></cd-form-button-panel>
</cds-modal>
